<template>
    <div class="fillcontain">
        <head-top></head-top>
        <h1 class="head_title">用户资料管理</h1>
        <div class="search">
          <div class="search_name">搜索名称:<input class="search_name_input" type="text" placeholder="请输入搜索名称"/></div>
          <div class="search_phone">联系电话:<input class="search_name_input" type="text" placeholder="请输入联系电话" maxlength="11"/></div>
          <div class="result" v-show="exportEX">导出</div>
          <div class="result">搜索</div>
          <div class="result">重置</div>
        </div>
        <div class="table_container">
          <el-table
		      :data="tableData"
		      style="width: 100%">
		      <el-table-column
		        prop="create_Number"
		        label="序号"
		        width="180">
		      </el-table-column>
          <el-table-column
            prop="openid"
            label="openid"
            width="180">
          </el-table-column>
		      <el-table-column
		        prop="user_name"
		        label="用户名字"
		        width="220">
		      </el-table-column>
          <!-- <el-table-column
            prop="sex"
            label="性别"
            width="180">
          </el-table-column> -->
		      <el-table-column
		        prop="tel"
		        label="联系电话">
		      </el-table-column>
          <!-- <el-table-column
            prop="birthday"
            label="出生日期">
          </el-table-column> -->
          <el-table-column
            prop="address"
            label="送货地址">
          </el-table-column>
          <el-table-column
            prop="operation"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="newView(scope)">查看</el-button>
            </template>
          </el-table-column>
		    </el-table>
		    <div class="Pagination" style="text-align:center;display:block;margin-top: 10px;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="20"
                layout="total, prev, pager, next"
                :total="count">
              </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
    import headTop from '../components/headTop'
    import {adminList, adminCount} from '@/api/getData'
    export default {
        data(){
            return {
              tableData: [],
              currentRow: null,
              offset: 0,
              limit: 10,
              count: 0,
              currentPage: 1,
              exportEX:true,
            }
        },
    	components: {
    		headTop,
    	},
        created(){
            this.initData();
        },
        methods: {
          async initData(){
              try{
                  const countData = await adminCount();
                  if (countData.status == 1) {
                      this.count = countData.count;
                  }else{
                      throw new Error('获取数据失败');
                  }
                  this.getAdmin();
              }catch(err){
                  console.log('获取数据失败', err);
              }
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.offset = (val - 1)*this.limit;
                this.getAdmin()
            },
            newView(val) {
              this.$router.push({path:'./detailed', query:{ id:val.row.operation}})
            },
            async getAdmin(){
                try{
                    const res = await adminList({offset: this.offset, limit: this.limit});
                    if (res.status == 1) {
                    	this.tableData = [];
                    	res.data.forEach(item => {
                    		const tableItem = {
                    			create_time: item.create_time,
      						        user_name: item.user_name,
      						        admin: item.admin,
                          city: item.city,
                          operation: item.id
                    		}
                    		this.tableData.push(tableItem)
                    	})
                    }else{
                    	throw new Error(res.message)
                    }
                }catch(err){
                    console.log('获取数据失败', err);
                }
            }
        },
    }
</script>

<style lang="less">
	@import '../style/mixin';
    .table_container{
        padding: 20px;
    }
    .head_title{
      text-align: center;
      padding: 20px 0;
      font-size: 36px;
    }
    .search {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80%;
      margin: 0 auto;
      height: 60px;
      font-size: 20px;
      .search_name,.search_phone {
        .search_name_input{
          border: 1px solid #ccc;
          margin-left: 10px;
          margin-right: 10px;
          height: 35px;
          }
        .search_phone_input{
          border: 1px solid #ccc;
          margin-left: 10px;
          margin-right: 10px;
          height: 40px;
          padding: 5px;
        }
      }
      .result{
        width:100px;
        text-align: center;
        border: 1px solid #999;
        background-color:#20a0ff;
        padding: 5px;
        color: #fff;
        margin-left: 10px;
      }
      .Pagination{
        text-align: center;
      }

    }
</style>
